<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex列表学习</title>
    <style>
        .container{
            width: 1000px;
            margin:0px auto;
        }
        .flex-list{
            display: flex;
            justify-content: space-between; /* 两边对齐 */
            justify-content: space-around; /* 间隔均衡 */
            justify-content: flex-start; /* 间隔均衡 */
          
           
            flex-wrap: wrap;
            margin: -5px;
            padding: 0;
        }
        .flex-list::after{
            content: "";
            width: auto;
        }

        .flex-list li{
            /* flex-grow 空间多余时是否放大：1则放大 0则不不放大 */
            /* flex-shrink 空间不足时是否缩小：1则缩小 0则不缩小.如果宽度是百分比的话，没效果 */
            /* flex-basis 项的大小空间 可以是百分比或者长度 默认auto*/
             /* 有多余空位时 放大比例 缩小比例 尺寸 */
             /* 不放大 不缩小：不占满，不换行  */
            flex:0 0 calc(33.33% - 10px);
            /* 放大 不缩小 ： 空间有多余时会占满行*/
            /* flex:1 0 calc(33% - 10px); */
             /* 不放大 会缩小：  */
            /* flex:0 1 calc(33.33% - 12px); */
             /*会放大 会缩小：空间有多余时会占满行，空间不够时会换行*/
            /* flex:1 1 calc(33.33% - 12px); */
            
            list-style-type: none;
            margin: 5px;
        }

        .flex-list li div{
            background-color: #7bed9f;
            border: 1px solid #2ed573;
            height: 300px;
        }

        .flex-list i{
            width: 30%;
        }

        /* 最后一行向左对齐的问题：
        1.如果使用space between或者 space around
            最后一行通过一个空元素填满（通过Js或者判断语法）
        2.
        */
    </style>
</head>
<body>
    <section>
        <h2>流式布局-向左对齐</h2>
        <div class="container">
            <ul class="flex-list">
                <li><div>a</div></li>
                <li><div>b</div></li>
                <li><div>c</div></li>
                <li><div>d</div></li>
                <li><div>e</div></li>
               
            </ul>
        </div>
       
    </section>
</body>
</html>